<template>
  <qc-page-table
    ref="userPageTableRef"
    :rowKey="(record) => record[primaryKey]"
    :columns="columns"
    :loadData="loadData"
    :download-excel="downloadExcel"
    :download-excel-name="userTableTitle"
  >
    <template #toolbarTitle>
      {{ userTableTitle }}
    </template>
    <template #toolbarButton>
      <qc-add-button @click="addButtonClick"></qc-add-button>
      <qc-upload-button @click="uploadButtonClick"></qc-upload-button>
      <qc-delete-button @click="deleteButtonClick"></qc-delete-button>
      <qc-add-button @click="addButtonClick"></qc-add-button>
    </template>
    <template #customUserAccount="{ text, record }">
      <qc-link :url="userEditPageUrl + record[primaryKey]">
        {{ text }}
      </qc-link>
    </template>
    <template #customUserSex="{ text, record }">
      <a-tag :color="text == 'MAN' ? '#87d068' : '#f50'">
        {{ record.userSexDesc }}
      </a-tag>
    </template>
    <template #customUserBrithday="{ text }">
      {{ text ? d(text, 'short') : '' }}
    </template>
  </qc-page-table>
  <qc-excel-upload
    ref="userExcelUploadRef"
    v-if="uploadVisible"
    v-model:visible="uploadVisible"
    @excelUpload="handleExcelUpload"
  ></qc-excel-upload>
</template>
<script lang='ts'>
import { defineComponent, reactive, ref, toRefs } from 'vue'
import userApi from '/@/api/org/user'
import { userTableColumns, userAddPageUrl, userEditPageUrl } from '/@/views/org/user/interface'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { useModelPageTable } from '/@/kit/model-kit'
export default defineComponent({
  name: 'OrgUserList',
  props: {
    queryParam: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  setup(props) {
    const { t, d } = useI18n()
    const router = useRouter()
    const userPageTableRef = ref(null)
    const userExcelUploadRef = ref()
    const { primaryKey, searchTable, loadData, deleteSelectData, downloadExcel } = useModelPageTable(
      userPageTableRef,
      userApi,
      props.queryParam
    )
    const userState = reactive({
      userTableTitle: t('org.user.userTableTitle'),
      userEditPageUrl,
      columns: userTableColumns,
      primaryKey,
      loadData,
      downloadExcel,
      uploadVisible: false, //上传文件页面显示
      addButtonClick: () => router.push({ path: userAddPageUrl }),
      deleteButtonClick: () => deleteSelectData(),
      uploadButtonClick: () => {
        userState.uploadVisible = true
      },
      handleExcelUpload: (formData: FormData) => {
        userApi.uploadExcel(formData).then((res) => {
          console.log(res)
          userExcelUploadRef.value.uploading = false
        })
      },
    })
    return {
      t,
      d,
      ...toRefs(userState),
      userPageTableRef,
      userExcelUploadRef,
      searchTable,
    }
  },
})
</script>